<link rel="stylesheet" href="templates/authority/sendMessage/css/sendMessage.css" />
<link rel="stylesheet" href="templates/authority/sendMessage/css/cropper.css" />
<link rel="stylesheet" href="templates/authority/sendMessage/css/VanyFilter.css" />
<div class="pd14 vany_authority">
	<div class="vany_treeTable pd14" id="authority">
		<!--面包屑-->
		<div class="pb10" id="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>消息中心</el-breadcrumb-item>
				<el-breadcrumb-item>编辑消息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--
        	作者：taoy@shwally.com
        	时间：2017-08-03
        	描述：发消息
        -->
		<div id="sendMessage">
			<div class="grid-content bg-purple">
				<span class="messageSpan el-form-item__label">消息模式:</span>
				<el-tabs type="card" @tab-click="handleClick">
					<el-tab-pane>
						<span slot="label"><i class="iconfont icon-_tuwen"></i> 图文</span>
						<div class="conLeft">
							<div class="line"></div>
							<el-form :model="ruleFormPicFont" :rules="rules" ref="ruleFormPicFont" label-width="100px" class="demo-ruleForm">
								<el-form-item label="标题:" prop="name">
									<el-input :maxlength="30" v-model="ruleFormPicFont.name" @input="descInput" placeholder="请输入标题内容">{{ruleFormPicFont.name}}</el-input>
									<span class="fontNumber">{{ruleFormPicFont.remnantInput}}/30</span>
								</el-form-item>

								<el-form-item label="消息内容:" required>
									<div id="editor" type="text/plain"></div>
									<div class="el-form-item__error">请填写消息内容</div>
								</el-form-item>
								<!--非空验证有问题-->
								<el-form-item label="封面图:" required prop="homeImg">
									<el-upload :auto-upload="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="avatar-uploader" action="" :show-file-list="false" :on-change="handleChange">
										<img :src="ruleFormPicFont.homeImg" class="avatar" id="avater_preview" onerror="nofindImg(this);">
										<div slot="tip" class="el-upload__tip">点击替换封面图片，建议尺寸900px*500px</div>
									</el-upload>
									<div class="el-form-item__error">请选择封面图</div>
								</el-form-item>
								<el-form-item label="摘要:" prop="desc">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" :maxlength="50" @input="descTextarea" v-model="ruleFormPicFont.desc" placeholder="不填写时取正文的前40个字">{{ruleFormPicFont.desc}}</el-input>
									<span class="fontNumber">{{ruleFormPicFont.remnantTextarea}}/50</span>
								</el-form-item>

								<el-form-item label="发送渠道:" prop="sendTypes">
									<el-checkbox-group v-model="ruleFormPicFont.sendTypes">
										<el-checkbox-button :checkonly="types.checkOnly" v-for="types in sendTypes" :key="types.key" @change="choiceChange" :label="types.key" :disabled="types.show===false">{{types.label}}</el-checkbox-button>
										<el-tooltip placement="bottom-start">
											<div slot="content">
												<h3>智能模式</h3>
												<ul>
													<li>消息推送的规则按先推送企业号，</li>
													<li>在对未关注企业号的用户推送邮箱，</li>
													<li>然后对没有邮箱的用户推送短信</li>
												</ul>
											</div>
											<i class="iconfont icon-tishi el-icon--right"></i>
										</el-tooltip>

									</el-checkbox-group>
								</el-form-item>

								<el-form-item label="接收人:" required prop="sendee">
									<div class="vanyfilter hastag" v-if="ruleFormPicFont.sendee" @click="openOrgFilter">
										<el-tag v-for="tag in sendeePicFont" :key="tag.id" :class="tag.type">
											<!--<i class="icon iconfont tag-icon"></i>-->
											<span v-text="tag.name" class="tag-name"></span>
										</el-tag>
									</div>
									<div class="vanyfilter" v-else @click="openOrgFilter">发送给部门、群组或成员</div>
									<el-input v-model="ruleFormPicFont.sendee" hidden></el-input>
								</el-form-item>

								<el-collapse v-model="ruleFormPicFont.setting" accordion id="collapse">
									<el-collapse-item>
										<template slot="title"><label>高级设置</label></template>
										<el-form-item label="开启确认:">
											<el-switch @change="sureChange" on-text="" off-text="" v-model="ruleFormPicFont.sure"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
										<el-form-item label="开启回复:">
											<el-switch @change="replyChange" on-text="" off-text="" v-model="ruleFormPicFont.reply"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
									</el-collapse-item>
								</el-collapse>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleFormPicFont','liji')">立即发送</el-button>
									<el-button @click="submitForm('ruleFormPicFont','dingshi')">定时发送</el-button>
									<el-button @click="submitForm('ruleFormPicFont','caogao')">存为草稿</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="conRight">
							<div class="grid-content bg-purple">
								<i class="iconfont icon-xiaoxi el-icon--right"></i>
								<div class="uploadTxt">
									<ul>
										<li class="messageTit">
											<span v-if="ruleFormPicFont.name">{{ruleFormPicFont.name}}</span>
											<span v-else>标题</span>
										</li>
										<li class="messageImg">
											<span v-if="ruleFormPicFont.homeImgState"><img :src="ruleFormPicFont.homePhotoUrl"></span>
											<span v-else></span>
										</li>
										<li>
											<span v-if="ruleFormPicFont.desc">{{ruleFormPicFont.desc}}</span>
											<span v-else>摘要</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane>
						<span slot="label"><i class="iconfont icon-_wenzi"></i> 文字</span>
						<div class="conLeft">
							<div class="line"></div>
							<el-form :model="ruleFormFont" :rules="rules" ref="ruleFormFont" label-width="100px" class="demo-ruleForm">
								<el-form-item label="消息内容:" prop="desc">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" :maxlength="200" @input="descTextarea" v-model="ruleFormFont.desc" placeholder="不填写时不显示摘要信息">{{ruleFormFont.desc}}</el-input>
									<span class="fontNumber">{{ruleFormFont.remnantTextarea}}/200</span>
								</el-form-item>
								<el-form-item label="发送渠道:" prop="sendTypes">
									<el-checkbox-group v-model="ruleFormFont.sendTypes">
										<el-checkbox-button :checkonly="types.checkOnly" v-for="types in sendTypes" :key="types.key" @change="choiceChange" :label="types.key" :disabled="types.show===false">{{types.label}}</el-checkbox-button>
										<el-tooltip placement="bottom-start">
											<div slot="content">
												<h3>智能模式</h3>
												<ul>
													<li>消息推送的规则按先推送企业号，</li>
													<li>在对未关注企业号的用户推送邮箱，</li>
													<li>然后对没有邮箱的用户推送短信</li>
												</ul>
											</div>
											<i class="iconfont icon-tishi el-icon--right"></i>
										</el-tooltip>
									</el-checkbox-group>
								</el-form-item>

								<el-form-item label="接收人:" required prop="sendee">
									<div class="vanyfilter hastag" v-if="ruleFormFont.sendee" @click="openOrgFilter">
										<el-tag v-for="tag in sendeeFont" :key="tag.id" :class="tag.type">
											<!--<i class="icon iconfont tag-icon"></i>-->
											<span v-text="tag.name" class="tag-name"></span>
										</el-tag>
									</div>
									<div class="vanyfilter" v-else @click="openOrgFilter">发送给部门、群组或成员</div>
									<el-input v-model="ruleFormFont.sendee" hidden></el-input>
								</el-form-item>

								<el-collapse v-model="ruleFormFont.setting" accordion id="collapse">
									<el-collapse-item>
										<template slot="title"><label>高级设置</label></template>
										<el-form-item label="开启确认:">
											<el-switch @change="sureChange" on-text="" off-text="" v-model="ruleFormFont.sure"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
										<el-form-item label="开启回复:">
											<el-switch @change="replyChange" on-text="" off-text="" v-model="ruleFormFont.reply"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
									</el-collapse-item>
								</el-collapse>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleFormPicFont','liji')">立即发送</el-button>
									<el-button @click="submitForm('ruleFormPicFont','dingshi')">定时发送</el-button>
									<el-button @click="submitForm('ruleFormPicFont','caogao')">存为草稿</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="conRight">
							<div class="grid-content bg-purple">
								<i class="iconfont icon-xiaoxi el-icon--right"></i>
								<div class="uploadTxt">
									<ul>
										<li>{{ruleFormFont.desc}}</li>
									</ul>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane>
						<span slot="label"><i class="iconfont icon-_wailian"></i> 外链</span>
						<div class="conLeft">
							<div class="line"></div>
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
								<el-form-item label="标题:" prop="name">
									<el-input :maxlength="30" v-model="ruleForm.name" @input="descInput" placeholder="请输入标题内容">{{ruleForm.name}}</el-input>
									<span class="fontNumber">{{ruleForm.remnantInput}}/30</span>
								</el-form-item>

								<el-form-item label="链接地址:" prop="linkAddress">
									<el-input v-model="ruleForm.linkAddress" placeholder="请填写带有http或者https协议的完整URL地址">{{ruleForm.linkAddress}}</el-input>
								</el-form-item>
								<!--非空验证有问题-->
								<el-form-item label="封面图:" required prop="homeImg">
									<el-upload :auto-upload="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="avatar-uploader" action="" :show-file-list="false" :on-change="handleChange">
										<img :src="photoUrl" class="avatar" id="avater_preview" onerror="nofindImg(this);">
										<div slot="tip" class="el-upload__tip">点击替换封面图片，建议尺寸900px*500px</div>
									</el-upload>
									<div class="el-form-item__error">请选择封面图</div>
								</el-form-item>
								<el-form-item label="摘要:" prop="desc">
									<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" :maxlength="200" @input="descTextarea" v-model="ruleForm.desc" placeholder="不填写时不显示摘要信息">{{ruleForm.desc}}</el-input>
									<span class="fontNumber">{{ruleForm.remnantTextarea}}/200</span>
								</el-form-item>

								<el-form-item label="发送渠道:" prop="sendTypes">
									<el-checkbox-group v-model="ruleForm.sendTypes">
										<el-checkbox-button :checkonly="types.checkOnly" v-for="types in sendTypes" :key="types.key" @change="choiceChange" :label="types.key" :disabled="types.show===false">{{types.label}}</el-checkbox-button>
										<el-tooltip placement="bottom-start">
											<div slot="content">
												<h3>智能模式</h3>
												<ul>
													<li>消息推送的规则按先推送企业号，</li>
													<li>在对未关注企业号的用户推送邮箱，</li>
													<li>然后对没有邮箱的用户推送短信</li>
												</ul>
											</div>
											<i class="iconfont icon-tishi el-icon--right"></i>
										</el-tooltip>

									</el-checkbox-group>
								</el-form-item>

								<el-form-item label="接收人:" required prop="sendee">
									<div class="vanyfilter hastag" v-if="ruleForm.sendee" @click="openOrgFilter">
										<el-tag v-for="tag in sendee" :key="tag.id" :class="tag.type">
											<!--<i class="icon iconfont tag-icon"></i>-->
											<span v-text="tag.name" class="tag-name"></span>
										</el-tag>
									</div>
									<div class="vanyfilter" v-else @click="openOrgFilter">发送给部门、群组或成员</div>
									<el-input v-model="ruleForm.sendee" hidden></el-input>
								</el-form-item>

								<el-collapse v-model="ruleForm.setting" accordion id="collapse">
									<el-collapse-item>
										<template slot="title"><label>高级设置</label></template>
										<el-form-item label="开启确认:">
											<el-switch @change="sureChange" on-text="" off-text="" v-model="ruleForm.sure"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
										<el-form-item label="开启回复:">
											<el-switch @change="replyChange" on-text="" off-text="" v-model="ruleForm.reply"></el-switch>
											<span>开启后，接收人需要对消息进行确认收到操作</span>
										</el-form-item>
									</el-collapse-item>
								</el-collapse>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm','liji')">立即发送</el-button>
									<el-button @click="submitForm('ruleForm','dingshi')">定时发送</el-button>
									<el-button @click="submitForm('ruleForm','caogao')">存为草稿</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="conRight">
							<div class="grid-content bg-purple">
								<i class="iconfont icon-xiaoxi el-icon--right"></i>
								<div class="uploadTxt">
									<ul>
										<li class="messageTit">
											<span v-if="ruleForm.name">{{ruleForm.name}}</span>
											<span v-else>标题</span>
										</li>
										<li class="messageImg">
											<span v-if="ruleForm.homeImgState"><img :src="ruleForm.homePhotoUrl"></span>
											<span v-else></span>
										</li>
										<li>
											<span v-if="ruleForm.desc">{{ruleForm.desc}}</span>
											<span v-else>摘要</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
				<!--提交信息-->
				<el-dialog title="提示" :visible.sync="dialogVisible" size="tiny" class="title_dialog">
					<span>确定发送该条消息吗？</span>
					<p>消息发送后，可在消息记录中查看发送记录</p>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="tijiao(true)">确 定</el-button>
						<el-button @click="tijiao(false)">取 消</el-button>
					</span>
				</el-dialog>
				<!--定时提交信息-->
				<el-dialog prop="thisTime" title="提示" :visible.sync="TimedialogVisible" size="tiny" class="title_dialog" id="timeChoice">
					<p><label>选择定时发送的时间：</label>
						<el-date-picker v-model="thisTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" @change="timeChange"></el-date-picker>
					</p>
					<p class="timeResulte"><label></label>该条消息将与<span></span>发出</p>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="sureTime(this)">确 定</el-button>
						<el-button @click="closeTime(this)">取 消</el-button>
					</span>
				</el-dialog>
			</div>

		</div>
	</div>
	<!--图片裁剪框-->
	<div id="userindexUserCropper">
		<el-dialog title="提示" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
			<div>
				<img id="avater_be_cropper" :src="imgSrc" style="max-width: 100%;" onerror="nofindImg(this);">
			</div>
			<span slot="footer" class="dialog-footer">
		    	<el-button type="primary" @click="updateAvater(true)">确 定</el-button>
		    	<el-button @click="updateAvater(false)">取 消</el-button>
		  	</span>
		</el-dialog>
	</div>
</div>
<script type="text/javascript" src="templates/authority/sendMessage/js/cropper.js"></script>
<script type="text/javascript" charset="utf-8" src="templates/authority/sendMessage/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="templates/authority/sendMessage/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="templates/authority/sendMessage/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="templates/authority/sendMessage/js/editMessage.js?ts=new Date().getTime()"></script>